<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../../resource/css/admin_css/list_style.css"/>
    <link rel="stylesheet" type="text/css" href="../../../resource/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../../resource/css/niubility.css"/>
    <script type="text/javascript" src="../../../resource/layui/layui.js"></script>
</head>
<body>
    <div class="bs">
        <input type="button" id="totalSelection" value="全部选中" />
        <input type="button" id="sure" value="审核" />
    </div>
    <table class="layui-table" id="runUse">
        <!-- 数据的改变区域 -->
        <thead>
            <tr>
                <td>请勾选</td>
                <td>设备编号</td>
                <td>设备名称</td>
                <td>职工编号</td>
                <td>职工名称</td>
                <td>开始时间</td>
                <td>结束时间</td>
                <td>存放地点</td>
                <td>备注</td>
            </tr>
        </thead>
        <tbody id="infoBox">
        </tbody>
        <!--用来分页的div-->
        <div class="fenBox">
            <div id="pagination1"></div>
        </div>
    </table>
    <script type="text/javascript" src="../../../resource/js/jquery.min.js"></script>
    <!--静态路径: 应该放在 渲染列表 和 审核功能的前面 -->
    <script src="../../../resource/js/static_url.js"></script>
    <script>

        //（1）运行使用： ---------------->  跟其他渲染列表不一样
        function myAjax(urls)
        {
            //拿数据，判断 code 和 data
            $.ajax({
                type: 'get',
                url: urls,
                async: true,
                success: function(info){
                    if(info.code != 0)
                    {
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg(info.msg, {skin:'tip_position',time:'3000'});
                        });
                        return;
                    }

                    var obj_arr = info.data.content;
                    // for in 循环进行字符串的拼接
                    var str = "";
                    for(var p in obj_arr)
                    {
                        str+=
                        '<tr>'+
                            '<td><input type="checkbox" class="xuanZhong" data-time="'+obj_arr[p].beginDate+'" data-id="'+obj_arr[p].equipmentNo+'"/></td>'+
                            '<td>'+obj_arr[p].equipmentNo+'</td>'+
                            '<td>'+obj_arr[p].equipmentName+'</td>'+
                            '<td>'+obj_arr[p].userNo+'</td>'+
                            '<td>'+obj_arr[p].userName+'</td>'+
                            '<td>'+obj_arr[p].beginDate+'</td>'+
                            '<td>'+obj_arr[p].endDate+'</td>'+
                            '<td>'+obj_arr[p].place+'</td>'+
                            '<td>'+obj_arr[p].remark+'</td>'+
                        '</tr>';
                    }
                    $("#infoBox").html(str);

                    //-----------*******这个就是分页的内容******-------------
                    layui.use('laypage', function(){
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        laypage.render({
                            elem: 'pagination1', //所放的div的id ，不用加#号
                            count: info.data.totalCount, //数据总数，从服务端得到
                            limit: info.data.pageSize, //每页显示几条
                            limits:[7],
                            groups: 5, // 连续出现的页码个数
                            curr: info.data.currentPage, //当前页
                            prev:'上一页',
                            next:'下一页',
                            layout:['count','prev', 'page', 'next','limit','limits','skip'],
                            jump: function(obj, first){
                                // 调整分页条目的位置（1）获取宽度（2）设置magrin-left
                                var width_fen = parseInt($(".fenBox").eq(0).css("width"));
                                $(".fenBox").eq(0).css({"margin-left":-width_fen/2+'px'});
                                if(!first){
                                    myAjax(admin_runUse+obj.curr);
                                    // 在这就要删除以前出现在页面上的数据
                                    $("#infoBox").empty();
                                }
                            }
                        });
                    });

                },
                error:function(){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('系统错误！！！', {skin:'tip_position',time:'3000'});
                    });
                }
            });
        }
        myAjax(admin_runUse+'1');

        //（2）全选：必须有全选，
        var flag = 1;
        $("#totalSelection").click(function()
        {
            if(flag)
            {
                /*属性设置成“ checked ”，给出一种选中的状态 * */
                for(let i=0;i<$("#infoBox .xuanZhong").length;i++)
                {
                    $("#infoBox .xuanZhong").eq(i).attr('checked',true);
                }
                $("#totalSelection").val("取消全选");
                flag = 0;
            }else{
                /*属性设置成“ checked ”，给出一种选中的状态 * */
                for(let i=0;i<$("#infoBox .xuanZhong").length;i++)
                {
                    $("#infoBox .xuanZhong").eq(i).attr('checked',false);
                }
                $("#totalSelection").val("全部选中");
                flag = 1;
            }
        });
        //(3) 审核
        $("#sure").click(function(){
           two_review(admin_runUse_review,admin_runUse);
            // 审核代码
            function two_review(myself_uri , list_url)
            {
                console.log(myself_uri);
                console.log(list_url);
                //装对象的数组放在这里： 每次点击就会重新“ 初始化 ”
                var obj_arr = [];
                //我要测试一下，到底能够得到多少复选框: 循环找到所有“ 勾选框的id和dateTime ”
                for(let i=0; i<$("#infoBox .xuanZhong").length; i++)
                {
                    if( $("#infoBox .xuanZhong").eq(i).is(':checked') )
                    {
                        //这就是将一个var a = { "date":"2018-10-09","equipmentNo":"002" }对象放进数组里面
                        var equipmentNo = $("#infoBox .xuanZhong").eq(i).attr("data-id");
                        var date = $("#infoBox .xuanZhong").eq(i).attr("data-time");
                        var obj = {
                            "date": date,
                            "equipmentNo":equipmentNo
                        }
                        //将拿好的数据放进 数组里面
                        obj_arr.push(obj);
                    }
                }
                // 好像还要将数组里面的对象解析成字符串
                var j_array = JSON.stringify(obj_arr);
                //传到后台
                $.ajax({
                    type: 'post',
                    url: myself_uri,
                    async: true,
                    contentType: 'application/json;charset=UTF-8',
                    data: "{\"equipmentNoAndDate\":"+j_array+"}",
                    success:function(info){

                        // 成功之后移除掉选中的节点
                        var selected = $("#infoBox .xuanZhong"); // 状态保留
                        // 移除所勾选的的parent 的 parent
                        for(let i=0;i<selected.length;i++)
                        {
                            if(selected.eq(i).is(':checked'))
                            {
                                document.getElementById("infoBox").removeChild(selected.eq(i)[0].parentNode.parentNode );
                            }
                        }

                        //提示用户： 完毕 ，请到管理员日志查看记录
                        layui.use('layer', function(){//自定页
                            var layer = layui.layer;
                            layer.alert('亲，审核成功，查看审核记录，请到管理员日志', {
                                skin: 'layui-layer-molv' //样式类名
                                ,closeBtn: 0
                            });

                            myAjax(list_url+'1');
                        });
                    },
                    error:function(){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg('系统错误！！！', {skin:'tip_position',time:'3000'});
                        });
                    }
                });
            }
        });


    </script>
</body>

</html>